import React, { Component, PureComponent, useState, useRef } from 'react';
import {
  Text, View,
  // Button,
  DeviceEventEmitter, ScrollView, SafeAreaView, Animated, TouchableOpacity
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import styles, { screenWidth } from 'src/styles';
import { Button, Provider, Toast } from '@ant-design/react-native';



function AntD({ navigation }) {

  const buildTitle = () => {
    return (
      <View style={{ alignItems: 'center', borderWidth: 0, padding: 10 }}>
        <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Ant Design</Text>
      </View>
    );
  }

  const trans = useState(new Animated.Value(0))[0];

  const scrollY = useRef(new Animated.Value(1)).current;

  const opacity = scrollY.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 1]
  });

  const opacity1 = scrollY.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 1]
  });

  const titleHeight = scrollY.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 35]
  });

  const onScroll = (e) => {
    // Animated.event([
    //   {
    //     nativeEvent: {
    //       contentOffset: {
    //         y: scrollY
    //       }
    //     }
    //   }
    // ], {
    //   useNativeDriver: false,
    // });

    // console.log(e.nativeEvent.contentOffset.y);
    // console.log(scrollY);
  }

  const data = [
    {
      title: 'Toast',
      icon: <Ionicons name="planet" size={16} />,
      onPress: () => { navigation.navigate('toast') },
    },
    {
      title: 'Layout',
      icon: <Ionicons name="pricetags" size={16} />,
      onPress: () => { navigation.navigate('layout') },
    },
    {
      title: 'Navigation ',
      icon: <Ionicons name="book" size={16} />,
      onPress: () => { navigation.navigate('nav') },
    },
    {
      title: 'Custom Navigation Bar',
      onPress: () => { navigation.navigate('customNavBar') },
    },
    {
      title: 'Custom Navigation Bar 1',
      onPress: () => { navigation.navigate('customNavBar1') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
    {
      title: 'Welcome',
      onPress: () => { navigation.navigate('welcome') },
    },
  ]

  // If you need to use Modal and Toast you also need to add Provider to the app entry point
  return (
    <Provider>
      <View style={styles.container}>
        <SafeAreaView />
        {/* <Animated.View style={{ opacity, height: titleHeight }}>
        {buildTitle()}
      </Animated.View> */}
        <ScrollView
          style={{ width: screenWidth }}
          contentContainerStyle={{ paddingHorizontal: 10 }}
          scrollEventThrottle={1}
          onScroll={onScroll}
        >
          <Animated.View style={{ opacity: opacity1 }}>
            {buildTitle()}
          </Animated.View>
          {/* <Button onPress={() => { navigation.navigate('welcome') }} title='Goto Welcome' /> */}
          {/* <Button onPress={() => { navigation.navigate('welcome') }}>Goto Welcome</Button> */}
          {
            data.map((item, idx) => {
              const { onPress, title } = item;
              return (
                <TouchableOpacity
                  style={{
                    flexDirection: 'row',
                    borderBottomWidth: 1,
                    borderColor: '#DDD',
                    paddingVertical: 10,
                    paddingHorizontal: 5,
                    marginHorizontal: 10,
                    alignItems: 'center',
                  }}
                  onPress={onPress}
                  key={`${title}-${idx}`}
                >
                  {item.icon}
                  {item.icon && <View style={{marginRight: 10}}/>}
                  <Text style={{ fontSize: 16 }}>{title}</Text>
                  <View style={{ flex: 1 }} />
                  <Ionicons name="chevron-forward" size={16} />
                </TouchableOpacity>
              )
            })
          }
          <View style={{ height: 40 }} />
        </ScrollView>
        {/* <SafeAreaView /> */}
      </View>
    </Provider>
  )
}

export default AntD;
